<template>
    <div
        class="container"
        :style="coverimage">
        <van-form
            @submit="onSubmit"
            @failed="onFailed">
            <van-row justify="space-between">
                <van-col span="24">
                    <van-cell-group
                        inset
                        style="margin: 0px">

                        <phone-field
                            v-model="phone"
                            :sendCodeMessage="$st('wp_Send_the_verification_code')"
                            @sendVcode="onSendValidatecode">
                        </phone-field>

                        <van-field
                            v-model="password"
                            :placeholder="$st('password')"
                            type="password"
                            :rules="[
                                { required: true, message: $st('please_input_a_password') },
                                {
                                    message: $st('the_password_length_should_not_be_less_than_6_characters'),
                                    validator: validatePwdlen,
                                },
                            ]"
                        />
                        <van-field
                            v-model="cpass"
                            :placeholder="$st('confirm_password')"
                            type="password"
                            :rules="[
                                { required: true, message: $st('enter_your_password_again') },
                                {
                                    message: $st('two_passwords_are_not_the_same'),
                                    validator: validatePwdTiwce,
                                },
                            ]"
                        />

                        <van-field
                            v-model="vercode"
                            type="digit"
                            :placeholder="$st('verification_code')"
                            :rules="[{ required: true, message: $st('enter_the_verification_code') }]"
                        />
                    </van-cell-group>
                </van-col>
            </van-row>
            <van-row justify="space-around">
                <van-button
                    class="resetbtn"
                    round
                    size="normal"
                    type="primary"
                    native-type="submit"
                >
                    {{ $st('reset_pwd')}}
                </van-button>
            </van-row>
        </van-form>

        <van-button
            round
            class="retbtn"
            @click="onRetLogin"> {{$st('return_login')}} </van-button>
    </div>
</template>

<script  >
import { reactive, toRefs, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import {
    LoginSetup,
    ForgetPwdSetup
} from '@/setup/login/LoginSetup';
import { Col, Row } from 'vant';
import PhoneField from '@/components/_common/PhoneField.vue';
import DefaultCoverImage from '@/assets/loginimg@2x.png';

export default {
    name: '',
    components: {
        [Col.name]: Col,
        [Row.name]: Row,
        PhoneField
    },
    props: {},
    setup (props, context) {
        const {
            sendMessage
        } = LoginSetup();
        const {
            forget_form,
            commitResetPassowrd
        } = ForgetPwdSetup();
        const router = useRouter();
        const store = useStore();
        const state = reactive({
            addr: '',
            phone: '',
            password: '',
            language: 'cn',
            vercode: '',
            cpass: ''
        });
        const coverimage = computed(() => {
            const coverimg = store.state.content_config?.pccoverimg?.url;

            return coverimg ? { backgroundImage: `url(${coverimg})` } : { backgroundImage: `url(${DefaultCoverImage})` };
        });

        const onRetLogin = () => {
            router.push({ path: '/login' });
        };
        const onSendValidatecode = (phone) => {
            sendMessage(phone);
        };

        const onFailed = (errorInfo) => {
            console.log('failed', errorInfo);
        };
        const onSubmit = () => {
            // 执行注册操作
            Object.assign(forget_form, state);
            commitResetPassowrd();
        };
        // 验证两次密码是否一致
        const validatePwdTiwce = (val) => {
            if (val !== state.password) {
                return false;
            }
            return true;
        };
        const validatePwdlen = (val) => {
            return val.length >= 6;
        };
        return {
            coverimage,
            validatePwdlen,
            validatePwdTiwce,
            onRetLogin,
            onSubmit,
            onFailed,
            onSendValidatecode,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  min-height: 550px;
  min-width: 300px;
  width: 100%;
  height: 100%;

  font-size: 13px;

  background-size: 100% 100%;
  background-clip: padding-box;
//   background-image: url("../../assets/loginimg@2x.png");
  background-repeat: no-repeat;
  padding: 30px 15px;
  box-sizing: border-box;

  .van-form{
    :deep(.van-cell){
        font-size: 17px;
    }
    :deep(.van-field__label){
        width: 52px;
    }
}
    .resetbtn {
        margin-top: 30px;
        width: 180px;
        height: 35px;
        opacity: 1;
        background: #1890ff;
        border-radius: 35px;
        font-size: 17px;
    }

    .retbtn {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.5);
        border: 0px solid white;
        font-size: 13px;
        width: 128px;
        height: 25px;
    }
}
</style>
